<template>
  <uni-popup ref="popupLogin" type="center" @maskClick="loginModule.closePopup(false)" style="zIndex:199;position:absolute;">
    <view class="login-box">
      <view class="content">
        <view class="item green">品客聚精彩绿皮书</view>
        <view class="item">开创精彩生活新概念！</view>
        <view class="item">友好酒店，友好景区，友好餐厅</view>
        <view class="item">让您的宠宝乐在其中！</view>
        <view class="item">携宠出行，视频分享，精彩社交</view>
        <view class="item">经验共享！</view>
        <view class="item">更多精彩内容，请关注品客聚精彩</view>
        <view class="item green">品客聚精彩，只为宠你！</view>
      </view>
      <view class="btns">
        <button class="btn btn-close" @click="loginModule.closePopup(false)">取消</button>
        <button class="btn btn-login" @click="loginModule.agreementHint">微信登录</button>
      </view>
      <view class="bottom">
        <label class="radio">
          <radio style="transform:scale(0.7)" @click="loginModule.clickAgreement" :checked="loginModule.agreement" color="#000000" />
        </label>
        <view class="text">
          <text @click="loginModule.clickAgreement">我已阅读并同意</text>
          <text class="isLink" @click="gotoPage(1)">《品客聚精彩用户协议》</text>和
          <text class="isLink" @click="gotoPage(2)">《隐私保护协议》</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  registerFrom: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:open', 'close', 'login'])
watch(() => props.open, (nv, ov) => {
  if (nv) {
    popupLogin.value.open()
  } else {
    popupLogin.value.close()
  }
})
const popupLogin = ref(null)
const loginModule = (() => {
  const $data = {
    agreement: ref(false), // 是否勾选协议
    prevTop: 0,
    closePopup (status) {
      emit('close', status || false)
      emit('update:open', false)
    },
    clickAgreement () {
      $data.agreement.value = !$data.agreement.value
    },
    agreementHint () {
      if (!$data.agreement.value) {
        uni.showToast({
          title: '请阅读并勾选下方《品客聚精彩用户协议》和《隐私保护协议》',
          icon: 'none'
        })
      } else {
        uni.reLaunch({
          url: `/pages/login?redirect=${encodeURIComponent('/science/hotel')}`
        })
      }
    }
  }
  return $data
})()
const gotoPage = value => {
  const url = value === 2 ? `/pages/webview?url=${encodeURIComponent('https://m.qumoyugo.com/act/pico_privacy.html')}` : `/pages/webview?url=${encodeURIComponent('https://m.qumoyugo.com/act/pico_user_concert.html')}`
  uni.navigateTo({
    url
  })
}
</script>

<style scoped lang="scss">
.login-box {
  width: 570rpx;
  padding: 48rpx 24rpx 32rpx 24rpx;
  text-align: center;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333333;
  background-color: #ffffff;
  border-radius: 12rpx;
  background-image: url(https://img.qumoyugo.com/webimgbg/green-book-login-popup-bg.png);
  background-size: 100% 100%;
  .content{
    text-align: left;
    padding: 0 48rpx;
    line-height: 56rpx;
    font-weight: 500;
    font-size: 28rpx;
    .item{
      color: #333333;
    }
    .green{
      color: #075D42;
    }
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 52rpx;
    .btn {
      width: 210rpx;
      height: 70rpx;
      border-radius: 70rpx;
      font-size: 28rpx;
      padding: 10rpx 0;
      line-height: 50rpx;
    }
    .btn-login {
      background: #525FA2;
      color: #ffffff;
    }
    .btn-close {
      background: #E2DFDF;
      color: #666666;
    }
  }
  .bottom {
    margin-top: 52rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 22rpx;
    padding: 0 36rpx;
    .radio {
      width: 60rpx;
    }
    .text {
      text-align: left;
      line-height: 28rpx;
      color: #333333;
      .isLink{
        color: #000000;
        font-weight: 500;
      }
    }
  }
}
</style>
